<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BHM@RAMA8 V 0.0.8</title>


<script type="text/javascript" src="./dygraph-combined.js"></script>
<style type="text/css">
    #bordered {
      border: 1px solid red;
    }
	.infotext {  }
	#div_g .dygraph-label { font-family: Georgia,Verdana,serif; }
	#div_g .dygraph-title { font-size: 36px; text-shadow: 2px 2px 2px gray; }
	#div_g .dygraph-ylabel { font-size: 18px; text-shadow: -2px 2px 2px gray; }
	.chart { border: 1px dashed black; margin: 5px 5px 5px 50px; padding: 2px; }
    </style>

<script >
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-40786629-1', 'bg4systems.com');
  ga('send', 'pageview');
	
var MaxITEMGraph=5;
var gBuffer="";

function getSOCK(){	
	var strDATA="";
	var Graph1="";
	var Graph2="";
	var Graph3="";
	var Graph4="";
	var Graph5="";
	var Graph6="";
	var spROW="<br>";
	var spCH=',';
	var ROW="";	
	var iROW,iCH;
	var rowMAX=-1;
	var chMAX=-1;

	var debug=1;

	if(debug==1){alert("start");}
	var XMLHttpRequestObject = false;
	if(window.XMLHttpRequest){
		XMLHttpRequestObject=new XMLHttpRequest();
		// code for IE7+, Firefox, Chrome, Opera, Safari
		//	alert("สามารถสร้าง XMLHttpRequest ได้");
	}else if(window.ActiveXObject){
	// code for IE6, IE5
		XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP")
		//alert("ไม่สามารถสร้าง XMLHttpRequest ได้ จึงต้องใช้ ActiveXObject");
	} else{
		//alert("Browser ไม่รองรับ AJAX");
	}
	XMLHttpRequestObject .onreadystatechange=function(){
		if (XMLHttpRequestObject .readyState==4 && XMLHttpRequestObject .status==200){
			strDATA=XMLHttpRequestObject .responseText;
			//--------------------------------------
			if(debug==1){alert("start2");}
			if (strDATA=="")	{
				alert("No Data");
				return 0;
			}else{
				alert(strDATA);
			}
			//-------  add buffer
			if (gBuffer.length>0){
				gBuffer+=spROW;
			}			
			gBuffer+=strDATA;
			strDATA="";
			//alert("Q Add");
			//------------------------------------------
//			document.write(gBuffer);
		//	document.write(strDATA);
			//alert("is DATA");
			if (gBuffer.length >0) {			
				//alert(strDATA);

				ROW = gBuffer.split(spROW); //split row
				//alert(ROW.length);
				//  ----FCFS Queue -------
				if(ROW.length>MaxITEMGraph){
					//alert("Q Move");
					//----- remove Frist Come ----					
					gBuffer=null;
//					for(iROW=1;iROW<=ROW.length;iROW++){
					// remove iROW=0
					for(iROW=1;iROW<=MaxITEMGraph+1;iROW++){
						if( iROW > 1){
							strDATA +=spROW;
						}//for(
						strDATA+=ROW[iROW];
					}
					gBuffer = strDATA; // save Buffer
					//document.write(gBuffer);
					//ROW="";
					ROW = gBuffer.split(spROW); //split row
				}//if(ROW.length>MaxITEMGraph){
				
				//------------------------------
				strDATA=ROW[0].split(spCH); //get channel
				//alert(strDATA.length); // ch = col.length - 2(index,datetime) 
				
				rowMAX = ROW.length; 
				chMAX = strDATA.length; // ลบ CMD,Length,DateTime
			
			//	rowMAX = 3; // ลบ header 1 row 
			//	chMAX =10; // ลบ CMD,Length,DateTime

				//alert("row:"+String(rowMAX) + " col:" + String(chMAX));
				if(rowMAX<=0){
					alert("!ไม่พบข้อมูล ROW");
					return 0;
				}
				if(chMAX<=0){
					alert("!ไม่พบข้อมูล CH");
					return 0;
				}
				//alert("Start add data");
				//------- Header --------------------------------
				Graph1 ="Date";
				Graph2 ="Date";
				Graph3 ="Date";
				Graph4 ="Date";
				Graph5 ="Date";
				Graph6 ="Date";
				//var x=1; //start 1,31,61,91,121,151,181
				var y=document.getElementById("set_responses").selectedIndex;			
				var  x=document.getElementsByTagName("option")[y].value;
				for(var i=0;i<5;i++){					
					Graph1+=",CH"+Number(Number(i)+Number(x));
					Graph2+=",CH"+Number(5+Number(i)+Number(x));
					Graph3+=",CH"+Number(10+Number(i)+Number(x));
					Graph4+=",CH"+Number(15+Number(i)+Number(x));
					Graph5+=",CH"+Number(20+Number(i)+Number(x));
					Graph6+=",CH"+Number(25+Number(i)+Number(x));
				}
				//alert(Graph4);
				x=Number(x)+2;
				//alert(ROW[0]);
				//---------------------------------------------------
				for(iROW=0;iROW<=rowMAX-1;iROW++){

					strDATA=ROW[iROW].split(spCH); // split Column
					//---- X Axis -------
					Graph1+='\n'+strDATA[1];
					Graph2+='\n'+strDATA[1];
					Graph3+='\n'+strDATA[1];
					Graph4+='\n'+strDATA[1];
					Graph5+='\n'+strDATA[1];
					Graph6+='\n'+strDATA[1];

					//--------- data ------
					Graph1+= ','+ strDATA[Number(x)];
					Graph1+= ','+ strDATA[Number(x)+Number(1)];
					Graph1+= ','+ strDATA[Number(x)+Number(2)];
					Graph1+= ','+ strDATA[Number(x)+Number(3)];
					Graph1+= ','+ strDATA[Number(x)+Number(4)];		
					
					Graph2+= ','+ strDATA[Number(x)+Number(5)];
					Graph2+= ','+ strDATA[Number(x)+Number(6)];
					Graph2+= ','+ strDATA[Number(x)+Number(7)];
					Graph2+= ','+ strDATA[Number(x)+Number(8)];
					Graph2+= ','+ strDATA[Number(x)+Number(9)];	
					
					Graph3+= ','+ strDATA[Number(x)+Number(10)];
					Graph3+= ','+ strDATA[Number(x)+Number(11)];
					Graph3+= ','+ strDATA[Number(x)+Number(12)];
					Graph3+= ','+ strDATA[Number(x)+Number(13)];
					Graph3+= ','+ strDATA[Number(x)+Number(14)];	

					Graph4+= ','+ strDATA[Number(x)+Number(15)];
					Graph4+= ','+ strDATA[Number(x)+Number(16)];
					Graph4+= ','+ strDATA[Number(x)+Number(17)];
					Graph4+= ','+ strDATA[Number(x)+Number(18)];
					Graph4+= ','+ strDATA[Number(x)+Number(19)];
//					if(Number(x)<181){
					Graph5+= ','+ strDATA[Number(x)+Number(20)];
					Graph5+= ','+ strDATA[Number(x)+Number(21)];
					Graph5+= ','+ strDATA[Number(x)+Number(22)];
					Graph5+= ','+ strDATA[Number(x)+Number(23)];
					Graph5+= ','+ strDATA[Number(x)+Number(24)];

					Graph6+= ','+ strDATA[Number(x)+Number(25)];
					Graph6+= ','+ strDATA[Number(x)+Number(26)];
					Graph6+= ','+ strDATA[Number(x)+Number(27)];
					Graph6+= ','+ strDATA[Number(x)+Number(28)];
					Graph6+= ','+ strDATA[Number(x)+Number(29)];
	//				}else{
//						Graph5="";
	//					Graph6=""
		//			}
				} // end for
			}else{
				 //alert("!การนำเข้าข้อมูลผิดพลาด myDATA");
				return 0;
			} //if (gBuffer.length >0) 

		//Graph1 ="item,CH1,CH2\n1,38,95 2,40,100\n3,42,105 4,44,110\n5,46,115\n6,48,120\n7,50,125 8,52,130\n9,54,135\n10,56,140";
		//alert(Graph1);
		//	alert(Graph3);
	//	document.write(strDATA);
	//	document.write(Graph1);
	//	document.write("<br>");
		//document.write(Graph2);
		//document.write("<br>");
		//document.write(Graph3);
		//document.write("<br>");
		//document.write(Graph4);
		//document.write("<br>");
		//document.write(Graph5);
		//document.write("<br>");
		

			//---debug---

		//	alert("*** endif-01 ");

//			{	title:'Demo Graph,2CH',
//				ylabel: 'Temperature (F)',
//				legend: 'always',
//				labelsDivStyles: { 'textAlign': 'right' }
//			}

		//                drawXGrid: false,
		    g1=new Dygraph(document.getElementById("graphdiv1"),Graph1,
				{title:'Reatime Data demo', 
				titleHeight: 22,
				labelsSeparateLines: true,
                labelsKMB: true,
				legend: 'always',
				ylabel: 'Signal',
                xlabel: 'Date',
                axisLineColor: 'white',
				labelsDivStyles: { textAlign: 'right' ,border: '0px solid blue' ,background: 'none' }, 
				valueRange: [-10, 10]	}	
			);
			
			g2=new Dygraph(document.getElementById("graphdiv2"),Graph2,
				{title:'Reatime Data demo', 
				titleHeight: 22,
				labelsSeparateLines: true,
                labelsKMB: true,
				legend: 'always',
				ylabel: 'Signal',
                xlabel: 'Date',
                axisLineColor: 'white',
				labelsDivStyles: { textAlign: 'right' ,border: '0px solid blue' ,background: 'none' }}	
			);
			g3=new Dygraph(document.getElementById("graphdiv3"),Graph3,
				{title:'Reatime Data demo', 
				titleHeight: 22,
				labelsSeparateLines: true,
                labelsKMB: true,
				legend: 'always',
				ylabel: 'Signal',
                xlabel: 'Date',
                axisLineColor: 'white',
				labelsDivStyles: { textAlign: 'right' ,border: '0px solid blue' ,background: 'none' },	valueRange: [-20, 20]}	
			);
			g4=new Dygraph(document.getElementById("graphdiv4"),Graph4,
				{title:'Reatime Data demo', 
				titleHeight: 22,
				labelsSeparateLines: true,
                labelsKMB: true,
				legend: 'always',
				ylabel: 'Signal',
                xlabel: 'Date',
                axisLineColor: 'white',
				labelsDivStyles: { textAlign: 'right' ,border: '0px solid blue' ,background: 'none' }}	
			);
				g5=new Dygraph(document.getElementById("graphdiv5"),Graph5,
				{title:'Reatime Data demo', 
				titleHeight: 22,
				labelsSeparateLines: true,
                labelsKMB: true,
				legend: 'always',
				ylabel: 'Signal',
                xlabel: 'Date',
                axisLineColor: 'white',
				labelsDivStyles: { textAlign: 'right' ,border: '0px solid blue' ,background: 'none' },valueRange: [-30, 30]}	
			);
			g6=new Dygraph(document.getElementById("graphdiv6"),Graph6,
				{title:'Reatime Data demo', 
				titleHeight: 22,
				labelsSeparateLines: true,
                labelsKMB: true,
				legend: 'always',
				ylabel: 'Signal',
                xlabel: 'Date',
                axisLineColor: 'white',
				labelsDivStyles: { textAlign: 'right' ,border: '0px solid blue' ,background: 'none' }}
				);
		return 0;
		}   
	}else{
		alert(" XMLHttpRequestObject  : not reponding ");
	}
	
}
XMLHttpRequestObject .open("GET","getdata02.php",true);
XMLHttpRequestObject .send();
</script>

</head>



<body>

<p>Display - Realtime</p>
<p align="center"><a href="mainmenu.php">Back</a></p>
<table width="809" border="0">
  <tr>
    <td>Select a set of responses for monitoring </td>
    <td>Time Unit</td>
    <td>Response</td>
  </tr>
  <tr>
	<!--  1,31,61,91,121,151,181 -->
    <td width="436"><select name="set_responses" size="1" id="set_responses">
      <option value="1" selected="selected">Group1  CH01 - CH30</option>
      <option value="31">Group2 CH31 - CH60</option>
      <option value="61">Group3 CH61 - CH90</option>
      <option value="91">Group4 CH91 - CH120</option>
      <option value="121">Group5 CH121 - CH 150</option>
      <option value="151">Group6 CH151 - CH180</option>
      <option value="181">Group7 CH181 - CH200</option>
    </select></td>
    <td width="173"><select name="within" id="within">
      <option selected="selected">1 Sec</option>
      <option>1 Min</option>
      <option>1 Hour</option>
    </select></td>
    <td width="200"><select name="response" id="response">
      <option selected="selected">Value</option>
      <option>Level</option>
    </select></td>
  </tr>
</table>
<!--   Real-Time   -->
<script >
	var myVar=setInterval(function(){getSOCK()},1000);
  </script>
<table width="100%" border="1">
  <tr>
    <td width="524">Graph1
<div id="graphdiv1" style="width: 100%; height: 250px;"></div></td>
    <td width="533">Graph2
<div id="graphdiv2" style="width: 100%; height: 250px;"></div></td>
  </tr>
  <tr>
    <td>Graph3
<div id="graphdiv3" style="width: 100%; height: 250px;"></div></td>
    <td>Graph4
<div id="graphdiv4" style="width: 100%; height: 250px;"></div></td>
  </tr>
  <tr>

 <td>Graph5
<div id="graphdiv5" style="width: 100%; height:250px;"></div></td>
    <td>Graph6
<div id="graphdiv6" style="width: 100%; height: 250px;"></div></td>

  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>
